<template lang="html">
  <div class="detail">
    <v-toolbar absolute>
      <v-btn icon @click="goback">
        <v-icon>fa-arrow-left</v-icon>
      </v-btn>

      <v-toolbar-title v-html="dataJson.FTitle"></v-toolbar-title>

      <v-spacer></v-spacer>

      <!-- <a v-html="addText" @click="goEdit"></a> -->
    </v-toolbar>

    <v-card :style="{height: height}">
      <v-img
        :src="`${baseUrl}/api/Ecp.Picture.view.img?pictureId=${dataJson.FCover}`"
        aspect-ratio="2.75"
      ></v-img>

      <v-card-title primary-title>
        <div v-html="dataJson.FContent">
        </div>
      </v-card-title>
    </v-card>

    <v-bottom-nav
      :active.sync="bottomNav"
      :value="true"
      absolute
      color="transparent">
      <router-link class="tab-link" v-for="tab, index in tabsButton" :to="{ path: tab.url, params: {} }" @click.native="changeTitle(tab.text)">
        <v-btn color="#006cc6" flat :value="index">
          <span>{{tab.text}}</span>
          <v-icon>{{tab.icon}}</v-icon>
        </v-btn>
      </router-link>
    </v-bottom-nav>
  </div>
</template>

<script>
// import {entityList} from "@/api"
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      height: "0px",
      title: "列表",
      addText: "新增",
      tabsButton: [
        {text: "主页", icon: "fa-home", url: "/homepage"},
        {text: "个人中心", icon: "fa-user", url: "/profile"}
      ],
      bottomNav: 0,
      dataJson: {}
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  mounted() {
    this.resize()
    this.loadData()
  },
  methods: {
    resize() {
      let windowHeight = window.getComputedStyle(document.querySelector('body')).height
      this.height = Number(windowHeight.replace('px', '')) - 56 - 56 + 'px'
    },
    goback() {
      this.$router.go(-1)
    },
    loadData() {
      service({
        url: `api/HR.Share.Edit.vdp?entityId=${this.$route.query.FId}`,
        method: 'post'
      }).then((res) => {
        this.dataJson = {}
        this.dataJson = res.data.data.editJson.data
      })
    }
  }
}
</script>

<style lang="scss">
.detail {
  height: 100%;
  position: relative;

  .v-card {
    box-shadow: none;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    overflow: auto;
  }

  .v-bottom-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    .tab-link {
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: 50%;
    }
  }
}
</style>
